<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%-- JSTL表达式（判断，循环，输出） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%-- 方法表达式（字符串截取，替换） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="<%=basePath%>css/amazeui.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/wap.css?2">
    <title>首页</title>
    <style>
        /*走马灯*/
        .marqueen{position: relative;border-top:1px solid #F5F5F5 ;border-bottom: 1px #f5f5f5 solid;overflow: hidden;}
        .marqueen-title{position: absolute;left:10px;padding-right:10px;border-right:1px solid #F5F5F5;}
        .demo li,#demo li a{height: 30px;line-height:30px; font-size: 1rem; overflow: hidden;}
        .demo{max-width:1200px; margin:0px auto;margin-left:60px;overflow:hidden;height:30px;width:100%; text-align:left;color:#ffffff;}
        .demo li {padding:0px 20px; font-size: 1.5rem}
        .demo li.title-first img,.demo li.title-first p{display: none;}
        .marqueenTwo{position: relative;overflow: hidden;}
        .marqueenTwo .marqueen-title i{margin-right:5px ;color: #d2364c;}
        .marqueenTwo .marqueen-title em{display: none;}
        .marqueenTwo .demo{margin-left:80px ;}


        .mod-vip,.advTip{display: none;}
    </style>
</head>
<body>
<%--<div data-am-widget="gotop" class="am-gotop am-gotop-fixed">
    <a href="#top" title="">
        <img class="am-gotop-icon-custom" src="img/goTop.png" />
    </a>
</div>--%>

<div class="pet_mian" id="top">
  <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false}' >
  <ul class="am-slides">
      <c:forEach var="personality" items="${bannerInfos}">
      <li>
            <img src="${personality.bannerImg}">
            <%--<div class="pet_slider_font">
                <span class="pet_slider_emoji"> (╭￣3￣)╭♡   </span>
                <span>“大白”有望成为现实：充气机器人研究取得进展</span>
            </div>--%>
          <a href="${personality.bannerUrl}"><div class="pet_slider_shadow"></div></a>
      </li>
      </c:forEach>
  </ul>
</div>


<div class="pet_circle_nav" style="padding:15px 10px 10px;">
    <div class="marqueenTwo" style="background: #FFF; border-radius: 30px;">
        <span class="marqueen-title" style="color: red; padding-top: 2px;"><i class="<%--am-icon-volume-up am-icon-fw--%>"></i>最新新闻<em class="am-icon-angle-double-right"></em></span>
        <div class="demo">

            <ul>
                <%--<li class="title-first"><a target="_blank" href="#">
                    <span>[特惠]</span>洋河年末大促，低至两件五折
                </a></li>
                <li><a target="_blank" href="#"><span>[特惠]</span>女生节商城爆品1分秒	</a></li>--%>
                <c:forEach var="news" items="${newss}">
                <li><a href="<%=basePath%>article/getArticleDetails/${news.articleId}"><span></span>${news.articleTitle}</a></li>
                </c:forEach>
            </ul>

        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="pet_content_main">
  <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
  <div class="am-list-news-bd">
  <ul class="am-list">
     <!--缩略图在标题右边-->
      <c:forEach var="personality" items="${personalitys.personalityInfos}" varStatus="status">
          <li class="am-g am-list-item-desced pet_list_one_block">
              <c:if test="${status.index == 0}">
                  <div class="pet_list_one_info">
                      <div class="pet_list_one_info_r" style="float: left;">
                          <div style="border-right: 0px; border-left: 3px solid #7f2d00;padding-left: 8px;" class="pet_list_tag pet_list_tag_mzt">个性推荐</div>
                      </div>
                  </div>
              </c:if>
              <div class=" am-list-main">
                  <a href="${personality.personalityUrl}" class="pet_hd_block">
                      <div class="pet_list_zt_img"><img class="wh_" style="width: 100%;" src="${personality.personalityImg}" alt=""></div>

                      <div class="am-list-item-text pet_list_two_text">${personality.personalityTitle}</div>
                      <div class="am-list-item-text pet_list_two_text" style="color: #999;">${personality.createTime}</div>
                  </a>
              </div>
          </li>
      </c:forEach>

      <c:forEach var="article" items="${articles}" varStatus="status">
      <li class="am-g am-list-item-desced pet_list_one_block">
          <c:if test="${status.index == 0}">
          <div class="pet_list_one_info">
              <div class="pet_list_one_info_r" style="float: left;">
                  <div style="border-right: 0px; border-left: 3px solid #7f2d00;padding-left: 8px;" class="pet_list_tag pet_list_tag_mzt">推荐文章</div>
              </div>
          </div>
          </c:if>
          <div class=" am-list-main">
              <a href="<%=basePath%>article/getArticleDetails/${article.articleId}" class="pet_hd_block">
                  <div class="pet_list_zt_img"><img class="wh_" style="width: 100%;" src="${article.articlePic}" alt=""></div>

                  <div class="am-list-item-text pet_list_two_text">${article.articleTitle}</div>
                  <div class="am-list-item-text pet_list_two_text" style="color: #999;">${article.createTime}</div>
              </a>
          </div>
      </li>
      </c:forEach>

      <c:forEach var="activity" items="${activitys}" varStatus="status">
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block" onclick="window.location.href='<%=basePath%>activity/getActivityDetails/${activity.activityId}'">
          <c:if test="${status.index == 0}">
          <div class="pet_list_one_info" style="margin-bottom: 2rem;">
            <%--<div class="pet_list_one_info_l">
                <div class="pet_list_one_info_ico"><img src="img/a1.png" alt=""></div>
                <div class="pet_list_one_info_name">Super invincible 菁 </div>
            </div>--%>
            <div class="pet_list_one_info_r" style="float: left;">
                <div class="pet_list_tag pet_list_tag_xxs" style="border-right: 0px; border-left: 3px solid #7f2d00;padding-left: 8px;">推荐活动</div>
            </div>
          </div>
          </c:if>
          <div class="am-u-sm-4 am-list-thumb">
              <a href="###" class="">
                  <img src="${activity.activityPic}" class="pet_list_one_img wh_" alt="" style="" />
              </a>
          </div>
        <div class=" am-u-sm-8 am-list-main pet_list_one_nr" style="padding-left: 1rem;">
            <h3 class="am-list-item-hd pet_list_one_bt"><a href="javascript:;" class="">${activity.activityName}</a></h3>
            <div class="am-list-item-hd pet_list_one_bt" style="line-height: 20px;font-size:12px;margin-top: -1px;color: #999; max-height: 1.5em; overflow: hidden; text-overflow: ellipsis;">${activity.activityTitle}</div>
            <div class="am-list-item-text pet_list_one_text" style="padding-left: 1rem; font-weight: bold; color: red;">￥ ${activity.activityPrice}</div>
        </div>

      </li>
      </c:forEach>

  </ul></div></div></div>
</div>

<jsp:include page="common.jsp">
    <jsp:param name="active" value="home" />
</jsp:include>

<script src="<%=basePath%>js/jquery.min.js"></script>
<script src="<%=basePath%>js/amazeui.min.js"></script>
<script src="<%=basePath%>js/height.js"></script>
<script>
$(function(){

    // 动态计算新闻列表文字样式
    auto_resize();
    $(window).resize(function() {
        auto_resize();
    });
    $('.am-list-thumb img').load(function(){
        auto_resize();
    });

    $('.am-list > li:last-child').css('border','none');
    function auto_resize(){
        window.setTimeout(function () {
            $('.pet_list_one_nr').height($('.pet_list_one_img').height());
        },200);
    }
        $('.pet_nav_gengduo').on('click',function(){
            $('.pet_more_list').addClass('pet_more_list_show');
       });
        $('.pet_more_close').on('click',function(){
            $('.pet_more_list').removeClass('pet_more_list_show');
        });
});

</script>
<script type="text/javascript">
    //if ($(window).width() < 640) {
    function autoScroll(obj) {
        $(obj).find("ul").animate({
            marginTop: "-30px"
        }, 500, function() {
            $(this).css({
                marginTop: "0px"
            }).find("li:first").appendTo(this);
        })
    }
    $(function() {
        setInterval('autoScroll(".demo")', 3000);
    })
    //}
</script>
</body>
</html>